Produktkonfiguratoren im Web

Die ingenious Stücklisten / Produktkonfiguratoren können in den Webmodulen WEB (mobiler Mitarbeiterzugriff), B2B (Angebots- und Bestellplattform für Fachhändler) und Preisinfo (Kalkulationstool für Endkunden) veröffentlicht werden. Damit erhält jede Zielgruppe die Möglichkeit, aktuelle Preise der angebotenen Produkte auch ohne große technische Kenntnisse selbst zu ermitteln, ohne erst mühsam in Katalogen und Preislisten suchen zu müssen.

Mit integrierter Validierung wird weitgehend ausgeschlossen, dass falsche oder unvollständige Konfigurationen berechnet und bestellt oder gar gefertigt werden.

Standardmäßig werden die Stücklisten technisch, inhaltlich und im Design im Web genauso dargestellt, wie im ingenious Client.

Darstellung eines Produktkonfigurators im ingenious.basic Client

Welche Stückliste im Web veröffentlicht wird, wird über den Matchcode des Produkts bestimmt. Der Aufruf für eine Preisinfo zum Beispiel lautet: "URL:Port/INFO/Matchcode"

Darstellung des Produktkonfigurators im Web

Für Fachhändler und insbesondere für Endkunden kann und sollte die Nutzerführung optimiert werden, um den Kunden die Bedienung zu erleichtern und um ihnen die Produktvarianten verständlicher zu machen.

Hierfür kommen zahlreiche Möglichkeiten in Betracht.

1. Bedienelemente im Web

Mit verschiedenen Web Controls können die Werte der Stücklistenvariablen in unterschiedlichen Formen dargestellt und mit zusätzlichen Hinweisen angereichert werden. Die folgenden Web controls sind in den Standardtemplates vorgegeben. Weitere sind auf Anfrage möglich. Grundsätzlich gilt, dass alle zu verwendenden Controls im entsprechenden Web Template (_PartlistItemPartial.cshtml) definiert sein müssen und dort entsprechend inhaltlich gestaltet werden können.

Art

Beschreibung

Texteingabefeld

In einem solchen Texteingabefeld kann freier Text eingetragen werden. Sie werden standardmäßig bei Stücklistenoptionen ohne Wertzuweisung verwendet.

Numerisches Eingabefeld

Im Unterschied zum Texteingabefeld erlaubt das nummerische Eingabefeld nur Zahlen, keine Buchstaben. Sie werden standardmäßig bei Stücklistenoptionen vom Typ INTEGER oder FLOAT verwendet.

Checkbox

Checkboxen sind entweder aktiv, oder nicht. Sie werden standardmäßig bei Stücklistenoptionen vom Type JA/NEIN oder NEIN/JA verwendet.

Checkbox

Kopiere Code

@if (iControlType == 1) // 1 - Checkbox
                {
                    <span class="input-group-addon" style="border: none; border-left: 1px solid #ccc; height : 32px;">
                        <input id='checkbox@(Model.sBindingValue)' type="checkbox" @(Model.sValue == "1" || Model.sValue == "-1" ? "checked" : "") onclick="OnCheckboxChanged('checkbox@(Model.sBindingValue)', '@(Model.sBindingValue)')">
                    </span>
                    <span class="input-group-addon" style="border: none; width:100%;"></span>
                }

Dropdown / Combobox

Auswahllisten werden standardmäßig für Stücklistenoptionen vom Typ LISTE oder FESTE LISTE angewandt.

Dropdown

Kopiere Code

@if (iControlType == 10 || iControlType == 11)  // 10 - Dropdown, 11 - Combobox
                {
                    <select id='select@(Model.sBindingValue)' class="form-control" onchange="OnSelectChanged('select@(Model.sBindingValue)', '@(Model.sBindingValue)')">
                        @if (!Model.asValueList.Contains(Model.sValue))
                        {
                            <option value='@Model.sValue' selected>@Model.sValue</option>
                        }
                        @for (int i = 0; i < Model.asValueList.Count; i++)
                        {
                            <option value='@(Model.asValueList[i])' @(Model.asValueList[i] == Model.sValue ? "selected" : "")>@(Model.asTranslatedValueList[i])</option>
                        }
                    </select>
                }

Radio Buttons

Radio Buttons können alternativ zu Auswahllisten genutzt werden.

Radio Buttons

Kopiere Code

@if (iControlType == 20)  // 20 - Radiobuttons
                {
                    if (!Model.asValueList.Contains(Model.sValue))
                    {
                        Model.asValueList.Insert(0, Model.sValue);
                    }
                    for (int i = 0; i < Model.asValueList.Count; i++)
                    {
                        <div class="basicRadio-primary">
                            <div class="basicRadio">
                                <input id="radio@(Model.sBindingValue)_@(i.ToString())" type="radio" name="radio@(Model.sBindingValue)" class="form-control" value="@(Model.asValueList[i])" onclick="OnRadioChanged('radio@(Model.sBindingValue)_@(i.ToString())', '@(Model.sBindingValue)')" style="@(i == 0 ? "border-top: none;" : i == Model.asValueList.Count - 1 ? "border-bottom: none;" : "")" @(Model.asValueList[i] == Model.sValue ? "checked" : "")>
                                <label for="radio@(Model.sBindingValue)_@(i.ToString())" style="@(i == 0 ? "border-top: none;" : i == Model.asValueList.Count - 1 ? "border-bottom: none;" : "")">@(Model.asValueList[i])</label>
                            </div>
                        </div>
                    }
                }

Slider / Tracker für numerische Werte

Slider können alternativ zu nummerischen Eingabefeldern eingesetzt werden. Allerdings eignen sie sich hauptsächlich bei vergleichsweise geringen Spannen und ganzzahligen Werten.

Slider

Kopiere Code

@if (iControlType == 23)  // 23 - Slider
                {
                    string[] asValues = Model.dictWebControl["control"].Substring(6).Replace("[", "").Replace("]", "").Split(';');
                    <div class="basicRange_1">
                        <div class="basicRange_2 col-lg-10 col-md-10 col-sm-11 col-xs-11 col-xxs-12">
                            <input id="range@(Model.sBindingValue)" name="range@(Model.sBindingValue)" type="range" class="form-control" min="@(asValues[0])" max="@(asValues[1])" step="@(asValues[2])" value="@(Model.sValue)" oninput="OnRangeChanged('range@(Model.sBindingValue)', '@(Model.sBindingValue)')" onload="OnRangeLoad('range@(Model.sBindingValue)', 'text@(Model.sBindingValue)', @(Model.sValue), @(asValues[0]), @(asValues[1]), @(asValues[2]))" />
                        </div>
                        <div class="basicRange_2 col-lg-2 col-md-2 col-sm-1 col-xs-1 hide-xxs">
                            <span>@(Model.sValue)</span>
                        </div>
                    </div>
                }

Colorpicker

Colorpicker eignen sich als Alternative zu Auswahllisten. Sie erlauben sowohl die Darstellung einer Farbe als RGB-Code als auch die Einbindung eines in der Stückliste hinterlegten Bildes, bzw. Bildskripts, z.B. für RAL-Lackierungen oder speziell gemusterte Folien.

Slider

Kopiere Code

@if (iControlType == 21)  // 21 - Colorpicker
                {
                    if (!Model.asValueList.Contains(Model.sValue))
                    {
                        Model.asValueList.Insert(0, Model.sValue);
                    }
                    string[] asValues1 = Model.dictWebControl["control"].Substring(5).Replace("[", "").Replace("]", "").Split(':');
                    string[] asValues2 = asValues1[1].Split(';');
                    asValues1 = asValues1[0].Split(';');
                    string[] asValueStyles = new string[Model.asValueList.Count];
                    string[] asValuesWhite = new string[Model.asValueList.Count];
                    for (int i = 0; i < Model.asValueList.Count; i++)
                    {
                        int index = Array.IndexOf(asValues1, Model.asValueList[i]);
                        if (!asValues1.Contains(Model.asValueList[i])) { }
                        else if (asValues2[index] == "#ffffff") { }
                        else if (asValues2[index].StartsWith("#"))
                        {
                            asValueStyles[i] = "background-color: " + asValues2[index] + ";";
                        }
                        else if (!Model.dictWebControlImages.ContainsKey(asValues2[index])) { }
                        else
                        {
                            asValueStyles[i] = "background-image: url(" + Model.dictWebControlImages[asValues2[index]] + ")";
                        }
                        if (string.IsNullOrEmpty(asValueStyles[i]))
                        {
                            asValueStyles[i] = "background-color: #ffffff; border: 1px solid #ccc;";
                            asValuesWhite[i] = "white";
                        }
                    }
                    <ul id="color@(Model.sBindingValue)" class="nav navbar-nav" style="width:100%;" tabindex="0">
                        <li class="dropdown" style="width:100%;">
                            <div class="dropdown basicColor">
                                <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                    <div class="basicColor_pickedColor">
                                        <span style="@asValueStyles[Model.asValueList.IndexOf(Model.sValue)]"></span><label>@(Model.sValue)</label><b class="caret caret_right"></b>
                                    </div>
                                </a>
                                <ul class="dropdown-menu dropdown-caret">
                                    @for (int i = 0; i < Model.asValueList.Count; i++)
                                    {
                                        <li><a class="colorpicker @(Model.asValueList[i] == Model.sValue ? "selected" : "") @(asValuesWhite[i])" href="#" style="@(asValueStyles[i])" onclick="OnImgSelectionChanged('@(Model.sBindingValue)', '@(Model.asValueList[i])')"></a></li>
                                    }
                                </ul>
                            </div>
                        </li>
                    </ul>                }

Picture Slider

Picture Slider können alternativ zu Auswahllisten eingesetzt werden. Sie stellen die einzelnen Auswahlmöglichkeiten anhand von Bildern, bzw. Bildskripten, die in der Stückliste hinterlegt sind, dar.

Picture Slider

Kopiere Code

@if (iControlType == 22)  // 22 - Picture slider
                {
                    string[] asValues1 = Model.dictWebControl["control"].Substring(7).Replace("[", "").Replace("]", "").Split(':');
                    string[] asValues2 = asValues1[1].Split(';');
                    asValues1 = asValues1[0].Split(';');
                    string[] asValueStyles = new string[Model.asValueList.Count];
                    for (int i = 0; i < Model.asValueList.Count; i++)
                    {
                        int index = Array.IndexOf(asValues1, Model.asValueList[i]);
                        if (!asValues1.Contains(Model.asValueList[i])) { }
                        else if (Model.dictWebControlImages.ContainsKey(asValues2[index]))
                        {
                            asValueStyles[i] = "background-image: url(" + Model.dictWebControlImages[asValues2[index]] + ");";
                        }
                        else
                        {
                            asValueStyles[i] = "background-color: #ffffff;";
                        }
                    }
                    <div class="basicPicture-container">
                        <div class="basicPicture-wrapper">
                            <ul id="pict@(Model.sBindingValue)" class="nav nav-tabs basicPicture-list" tabindex="0">
                                @for (int i = 0; i < Model.asValueList.Count; i++)
                                {
                                    <li>
                                        <a class="basicPict @(Model.asValueList[i] == Model.sValue ? "selected" : "")" href="#" style="@(asValueStyles[i])" onclick="OnImgSelectionChanged('@(Model.sBindingValue)', '@(Model.asValueList[i])')"></a>
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                }

Button

Buttons können alternativ zu Auswahllisten eingesetzt werden. Sie stellen die einzelnen Auswahlmöglichkeiten anhand von Schaltflächen dar.

Button

Kopiere Code

@if (iControlType == 24) // 24 - Button
                {
                    <div class="basicPicture-container">
                        <div class="basicPicture-wrapper">
                            <ul id="pict@(Model.sBindingValue)" class="nav nav-tabs basicPicture-list" tabindex="0" style="height:100%;">
                                @for (int i = 0; i < Model.asValueList.Count; i++)
                                {
                                    <li>
                                        <button name="submitform" value="@Model.asValueList[i]" class="btn basicButton @(Model.asValueList[i] == Model.sValue ? "basicButtonSelected" : "")" onclick="OnImgSelectionChanged('@(Model.sBindingValue)', '@(Model.asValueList[i])')">
                                            <span>@Model.asValueList[i]</span>
                                        </button>
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                }

Pictures, Sliders und Color-Picker im Produktkonfigurator

Radio-Buttons, Picture-Slider, Tooltips,... im Produktkonfigurator

2. Definition der Controls in den Stücklisten

Tabellarische Schreibweise

Allgemeines	Das Webcontrol jeder einzelnen Option wird über eine separate Zeile in der Aufmaß-Definition der Stückliste mit der Bezeichnung "=webcontrol Variablenname" bestimmt. Als Wert wird der jeweilige Syntax des Webcontrols zusammen mit den relevanten Werten eingetragen.
Texteingabefeld	Eine als Text definierte Variable benötigt kein extra Webcontrol. Das Texteingabefeld wird standardmäßig angezeigt. Allerdings können mit der Definition als Webcontrol Zusatztexte etc. angezeigt werden. Mit dem Wert "description=" + nachfolgendem beliebigen Text kann ein Erklärungstext hinterlegt werden, der so lange als Platzhalter angezeigt wird, bis der Nutzer einen eigenen Text in das Konfiguratorfeld einträgt.
Nummerisches Eingabefeld	Für eine als INTEGER oder FLOAT definierte Variable wird standardmäßig ein nummerisches Eingabefeld angezeigt. Die Bestimmung eines extra Webcontrols ist nicht erforderlich.
Checkbox	Für das Steuerelement Checkbox, das mit Ja/Nein bzw. Nein/Ja definiert wird, ist kein extra Webcontrol erforderlich.
Drop down / Combobox	Für alle Listenelemente (Feste Liste, Liste, List) wird standardmäßig ein Drop down angezeigt. Die Definition als extra Webcontrol ist nicht erforderlich.
Radio Buttons	Radio Buttons sind eine Alternative zur klassischen Auswahlliste (Drop down). Die Werte werden fließend mit einem vorangestellten anklickbaren kreisförmigen Optiononsfeld dargestellt. Die Definition erfolgt mit dem Ausdruck "control=radio".
Slider / Tracker für nummerische Werte	Ein Slider für nummerische Werte, der anstelle eines Eingabefeldes angezeigt wird, wird über den Ausdruck "control=slider[0;10;1]" definiert. Die Werte in eckigen Klammern stehen für: [Startwert;Endwert;Laufschritte].
Colorpicker	Ein Colorpicker zur alternativen Darstellung einer Auswahlliste mit Farben wird über "control=color[Werte;Farbcodes]" definiert. Beispiel: control=color[weiß;braun;grau;grün;RAL:#ffffff;#b97a57;#a0a0a0;#26392f;RAL] Für nicht über Hex-Code darstellbare Farben können Bilder oder Bildskripte geldane werden, dafür ist der Name des Bildes anstelle eines Farbcodes einzutragen. Z.B. wird für RAL-und Folien-Beschichtungen oft ein mehrfarbiges Bild verwendet.
Picture Slider	In einem Bildslider werden statt einer klassischen Auswahliste Bilder dargestellt, die die Optionen visuell verdeutlichen. Schreibweise: control=picture[Werte:Bildnamen] Beispiel: control=picture[X PVC;XL PVC;XXL PVC:X_PVC;XL_PVC;XXL_PVC] Die Bilder müssen in der jeweiligen Stückliste in den gespeicherten Bildern oder als gespeichertes Bildskript eingefügt sein. Der Name des einzelnen Bildes ist innerhalb der eckingen Klammern des Webcontrols anzugeben.
Button	Buttons sind eine Alternative zur klassischen Auswahlliste (Drop down). Die Werte werden einzeln in anklickbaren Schaltflächen dargestellt. Die Definition erfolgt mit dem Ausdruck "control=button".
Extras	Jedes Webcontrol kann neben seinem eigentlichen Inhalt, nämlich dem zur Auswahl der Optionen zusätzliche Infos enthalten, die dem Nutzer die Auswahl erleichtern sollen. Für jeden Extra-Inhalt ist je eine separate Zeile für die gleiche Variable anzulegen. "=webcontrol Variablenname" Die Extras können jeweils für die Variable im Ganzen oder für die einzeln gewählte (angeklickte) Auswahl angezeigt werden.
Titel	Jede Option kann mit einem Titel / einer Überschrift hervorgehoben werden, und zwar a) die Option im Ganzen title=Überschrift oder b) jede einzelne Variante title={tab(Variable)("Wert1";"Wert2";...:"Überschrift1";"Überschrift2";...)}
Beschreibung	Zu jeder Option kann ein erklärender Beschreibungstext hinterlegt werden, und zwar a) für die Option im Ganzen description=Beschreibungstext oder b) für jede einzelne Variante description={tab(Variable)("Wert1";"Wert2";...:"Beschreibungstext1";"Beschreibungstext2";...)}
Bild	Zu jeder Option kann zusätzlich zu den eventuellen Bildern in einem Slider ein größeres / anderes Vorschaubild angezeigt werden, und zwar a) für die Option im Ganzen picture=Bildname oder b) für jede einzelne Variante picture={tab(Variable)("Wert1";"Wert2";...:"Bildname1";"Bildname2";...)}
Tooltip	Für jeder Option können über einen Tooltip ergänzende Infos aus einem Bild oder PDF geladen werden, und zwar a) für die Option im Ganzen tooltip=Info oder b) für jede einzelne Variante tooltip={tab(Variable)("Wert1";"Wert2";...:"Info1";"Info2";...)} Info steht hier für einen Bildnamen, wie er in den gespeicherten Bildern oder Bildskripten angelegt ist oder für den Dateinamen eines PDFs, das im Webverzeichnis (\inetpub\WebsiteName\Content\Tooltips\) gespeichert ist.
HTML	Der Parameter "html=" ist reserviert für individuelle Zusätze, die nicht mit den bereits vorhandenen Extras abgedeckt werden. So könnte z.B. statt einem Tooltip insgesamt oder pro ausgewähltem Wert auch je ein Tooltip für alle einzelnen Werte hinterlegt werden, der direkt am auswählbaren Wert geöffnet werden kann, noch bevor dieser Wert angeklickt wurde.

Webcontrols in der tabellarischen Schreibweise

Fließender Code (Quellcode Ansicht)

In der Quellcode-Schreibweise der Stücklisten werden alle Bestandteile eines Webcontrols in einem Ausdruck zusammengefasst.

WebControl("Variable", sWebControl, sWebHeader, sWebDesc, sWebImage, sWebTooltip, sWebHTML);

Die verfügbaren Strings sind weitgehend selbsterklärend. Soll ein Bestandteil für die einzelne Variable nicht genutzt werden, so wird dieses einfach leer gelassen ("").

Die einzelnen Strings des Webcontrols können zur besseren Lesbarkeit auch vorangestellt definiert werden:

sWebControl = "";

sWebHeader = "";

sWebDesc = "";

sWebImage = "";

sWebTooltip1 = "";

sWebTooltip2 = "";

WebControl("Variable", sWebControl, sWebHeader, sWebDesc, sWebImage, sWebTooltip1, sWebTooltip2);

Es sind dieselben Webcontrols wie für die tabellarische Schreibweise verfügbar.

Webcontrols in der Quellcode-Ansicht

Segmente

Schon in der Darstellung in der Client/Server-Version können Gruppen von Variablen in Segmenten zusammengefasst werden.

Schreibweise in der tabellarischen Form: "=section 1. Abmessungen"

Schreibweise in der Quellcode-Ansicht: "Conf_Section("title1", "1. Abmessungen", true);" - true oder false bestimen, ob das Segment beim Öffnen des Konfigurators auf- oder zugeklappt ist.

Während aber im Client das Segment die einzelnen Gruppen lediglich mittels Überschriften voneinander abhebt, werden sie im Web sichtbar voneinander abgetrennt. Abhängig von der Definition auf den Webtemplates (\Views\Partlist\Partlist.cshtml) werden die abgetrennten Bereiche als Reiterkarten oder Segmente dargestellt.

Gleich am Anfang der Partlist.cshtml wird entweder das Template der Reiterkarten geladen oder das der Segmente.

@model ingenious.mvc.Models.PartlistModel
@Html.Partial("_PartlistReiterPartial", Model)

@model ingenious.mvc.Models.PartlistModel
@Html.Partial("_PartlistSegmentsPartial", Model)

Darstellung der Gruppen in Reiterkarten / Tabs

Produktkonfigurator mit Segmenten